<template>
  <div class="block_leftgp">
    <div class="block_gp_title">Block</div>
    <div class="block_gp_search">
      <el-input
        placeholder="Search"
        v-model="searchVal">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <el-tabs v-model="blockType" @tab-click="handleClick">
      <el-tab-pane v-for="(scriptTypeItem,itemIndex) in comScriptTypeList"
                   :key="itemIndex"
                   :label="scriptTypeItem.dictLabel"
                   :name="scriptTypeItem.dictValue">
        <div v-if='blocksList.length > 0'
             class="card-content scroll-css">
          <div v-for="(item, i) in comDataList"
               :key="i"
               style="width:340px"
               class="block_item_box"
               @click="selectBlcokBox(item)">
            <BlockItem :blockInfo='item' />
          </div>

        </div>
        <div v-else
             class="card-content-nodata">No Data&nbsp;&nbsp;
          <el-button @click="getBlocksList"
                     type="text"
                     size="mini">Refresh</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
import BlockItem from './block-item'
export default {
  name:'BlockGroup',
  props: {
    blockGpTabCur: Boolean
  },
  components: { BlockItem },
  data () {
    return {
      blockType: 'action',
      blocksList: [],
      designMode: 'edit',
      dialogVisible: false,
      searchVal: '',
      blocksListSearch: []
    }
  },
  watch: {
    comblockGpTabCur (val) {
      if (val) this.blockType = 'trigger'
      else this.blockType = 'action'
      this.blocksListSearch = this.getBlockListForType(this.blockType)
    }
  },
  computed: {
    comblockGpTabCur () {
      return this.blockGpTabCur
    },
    comScriptTypeList () {
      let tempList = [
        { dictLabel: 'Trigger', dictValue: 'trigger' },
        { dictLabel: 'Action', dictValue: 'action' },
        { dictLabel: 'Filter', dictValue: 'filter' }
      ]
      try {
        let dataList = this._.cloneDeep(window.SITE_CONFIG['dictList'].find(e => e.dictType === 'script_type').dataList || tempList)
        if (this.blockGpTabCur) {
          return [dataList.shift()]
        } else {
          dataList.shift()
          return dataList
        }
      } catch (error) {
        return tempList
      }
    },
    comDataList () {
      var retdata = []
      retdata = this.blocksListSearch

      retdata = retdata.filter(item => {
        if (this.searchVal) {
          if (item.description) {
            return item.name.toLowerCase().includes(this.searchVal.toLowerCase()) || item.description.toLowerCase().includes(this.searchVal.toLowerCase())
          } else {
            return item.name.toLowerCase().includes(this.searchVal.toLowerCase())
          }
        } else {
          return item
        }
      })
      return retdata
    }
  },
  created () {
    this.getBlocksList()
  },
  methods: {
    handleClick (tab) {
      this.blocksListSearch = this.getBlockListForType(tab.name)
    },
    getBlocksList () {
      this.$interface.bots.getScriptListApi({ tenantId: this.$store.state.user.tenantCode })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.blocksList = res.data
          this.scriptList = this.blocksList
          this.blocksListSearch = this.getBlockListForType(this.blockType)
        }).catch(() => { })
    },
    getBlockListForType (type) {
      return this.blocksList.filter(e => e.type === type)
    },
    selectBlcokBox (data) {
      this.$emit('selectblockInfo', data)
    }
  }
}
</script>
<style lang="scss">
.block_leftgp {
  padding-top: 16px;
  .block_gp_title{
    height: 24px;
    font-size: 16px;
    color: #404040;
    line-height: 24px;
    margin-bottom: 20px;
    font-weight: 700;
    // padding-left: 10px;
  }
  .block_gp_search{
    height: 32px;
    margin-bottom: 10px;
    // padding-left: 10px;
  }
  .el-tabs{
    // padding-left: 10px;
    .el-tabs__header{
      margin: 0;
    }
    .el-tabs__content{
      overflow: auto;
      width: 350px;
    }
  }
  .scroll-css::-webkit-scrollbar-thumb{
    background-color: #C0C0C0;
  }
  .scroll-css::-webkit-scrollbar-track{
    box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #fff;
  }
  .card-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    //height: calc(100vh - 330px);
    padding-top: 20px;
    width: 350px;
    border: 0;
    .block_item_box{
      cursor: pointer;
      background: #ffffff;
      border: 1px solid #fcfcfc;
      border-radius: 6px;
      margin-bottom: 10px;
      box-shadow: 0px 0px 8px 0px #F0F0F0;
    }
  }
}

</style>
